<!-- 个人中心页面 展示用户头像,用户iduserId,手机号userPhone,用户积分userPoints -->
<template>
  <div id="app">
    <div class="user-profile">
      <el-row class="tac">
        <!-- 页面主题内容 -->
        <el-col :span="22">
          <div id="chat">
            <div class="chatBox">
              <div class="chatBox-top">
                <div class="chatBox-top-imgBox">
                  <van-image round width="2.5rem" height="2.5rem" :src="thisChatInfo.otherAvatar" />
                </div>
                <div class="chatBox-top-text">
                  <span>{{ thisChatInfo.userName }}</span>
                </div>
              </div>
              <van-icon class="chatBox-back" name="revoke" @click="back" />
              <div class="chatBox-middle">
                <div id="chatInfo" class="chatInfo">
                  <div
                    v-for="(message) in thisChatInfo.messageList"
                    class="chatUser-box"
                    :class="[message.isMyText ? 'chatUser-box1' : 'chatUser-box']"
                  >
                    <div class="chatUser-box-img">
                      <van-image
                        round
                        width="2.5rem"
                        height="2.5rem"
                        :src="message.isMyText ? thisChatInfo.myAvatar : thisChatInfo.otherAvatar"
                      />
                    </div>
                    <div class="chatUser-info">
                      <div
                        class="chatUser-info-name"
                        :class="[message.isMyText ? 'chatUser-info-name1' : 'chatUser-info-name']"
                      ><span
                        class="nowDate"
                      >{{ message.time }}</span>
                      </div>
                      <div
                        class="chatUser-info-text"
                        :class="[message.isMyText ? 'chatUser-info-text1' : 'chatUser-info-text']"
                      >
                        <span>{{ message.messageText }}</span>
                        <img :src="message.messageImg" style="max-width: 200px; max-height: 200px;">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="chatBox-fastChat">
                <van-button
                  v-for="(fastChat) in fastChatList"
                  class="fastChat"
                  type="primary"
                  @click="fastRepeat(fastChat.myMessage,fastChat.otherMessage)"
                >{{ fastChat.name }}
                </van-button>
              </div>
              <div class="chatBox-infoDesk">
                <div class="chatBox-textarea">
                  <van-field v-model.trim="messages" @keyup.enter="getSend" style="border-top: 1px solid #ccc;" rows="4" type="textarea" placeholder="请输入咨询信息" />
                </div>
                <div class="chatBox-sendOut">
                  <van-button class="sendOut" type="primary"  @click="getSend" >发送</van-button>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Chat',
  props: {
    userId: {}
  },
  data() {
    return {
      messages: '',
      chatInfo: [{
        userId: 1,
        userName: '昨日机器A数据',
        myAvatar: 'http://bittersweetyao.gitee.io/pic/pic/myavatar.png',
        otherAvatar: 'http://bittersweetyao.gitee.io/pic/pic/robot.jpg',
        messageList: [
        ]
      },
      {
        userId: 2,
        userName: '设计迭代方案',
        myAvatar: 'http://bittersweetyao.gitee.io/pic/pic/myavatar.png',
        otherAvatar: 'http://bittersweetyao.gitee.io/pic/pic/save.jpg',
        messageList: [
        ]
      },
      {
        userId: 3,
        userName: '设计迭代方案',
        myAvatar: 'http://bittersweetyao.gitee.io/pic/pic/myavatar.png',
        otherAvatar: 'http://bittersweetyao.gitee.io/pic/pic/robot.jpg',
        messageList: [
        ]
      },
      {
        userId: 4,
        userName: '项目1与项目2数据分析比对',
        myAvatar: 'http://bittersweetyao.gitee.io/pic/pic/myavatar.png',
        otherAvatar: 'http://bittersweetyao.gitee.io/pic/pic/robot.jpg',
        messageList: [
        ]
      }
      ],
      thisChatInfo: {
      },
      fastChatList: [
        {
          name: '今日数据',
          myMessage: '`昨天设备运行情况怎么样`',
          otherMessage: [
            {
              isImg: false,
              content: `2023/9/16 状态设备运行情况良好
                生产力较上日提升12.4%
                能源消耗较上日提升 6.3%
                碳排放较上日提升 8.2%
                设备维修1次
                建议：近日天气升温，需减小能源消耗,增大散热，加强消防巡检`
            },
            {
              isImg: false,
              content: `生产力分析`
            },
            {
              isImg: true,
              content: 'http://bittersweetyao.gitee.io/pic/pic/biao.jpg'
            }
          ]
        },
        {
          name: '昨日情况',
          myMessage: '昨天维修的是什么东西',
          otherMessage: [
            {
              isImg: false,
              content: `2023/9/16 维修了变速机构
                变速机构是一种设计用来改变机械系统中传动比例的装置。它允许在不同的速度和扭矩要求下调整输出速度和扭矩。变速机构通常用于机动车辆、工程机械、工业设备和其他机械系统中，以满足不同工作条件下的性能需求。
                维修原因：定期维护可以确保机械系统更高效地运行，从而减少能源消耗和碳排放，有助于环保。`
            }
          ]
        },
        {
          name: '未来安排',
          myMessage: '下周应该怎么样安排生产',
          otherMessage: [
            {
              isImg: false,
              content: `预测下周碳交易价格上涨，产品市场需求减弱，天气升温，系统将会执行以下生产执行标准
              2023/9/18-2023/9/24生产执行标准`
            }
          ]
        }
      ],
      manageFastChatList: [
        {
          name: '本季利润',
          myMessage: '本季利润如何',
          otherMessage: [
            {
              isImg: false,
              content: '下面是本季与上季金额对比表'
            },
            {
              isImg: true,
              content: 'http://bittersweetyao.gitee.io/pic/pic/profit.jpg'
            },
            {
              isImg: false,
              content: '通过对比得出：本季营收稳定，但是管理运维费用过高,需要注意运维成本。'
            }
          ]
        }
      ],
      talk: {
        my: ['你好', '谢谢', '你今天都做了什么', '本季利润', '昨天设备运行情况', '你是如何预测的', '嘉然今天吃什么', '你能帮我什么', '今天天气怎么样', '你是谁'],
        robot: ['请问您需要什么帮助', '不客气，如果您有任何其他问题，都可以随时问我。', '我统计了昨天的碳排放量，能源消耗，并对碳排放做出了预测，分析了生产力等等', '本季利润', '昨天设备运行情况', '分析碳市场的供需情况，包括碳排放配额的供应情况、工业和能源行业的碳排放情况、政府政策的变化等，以及全球经济和能源市场的走势。', '很抱歉，我无法提供有关特定人物的个人信息或行为。如果您有其他问题或需要帮助，请随时告诉我。', '我可以帮您整理数据信息，并做出分析，预测碳交易等等', '抱歉，我无法回答关于天气的问题。有关天气预报和实时天气情况，建议您查看天气预报网站或使用相关的天气预报应用程序。祝您有一个愉快的一天！', '我是一个人工智能语言模型，可以回答您的问题和提供一些帮助。我由人工智能算法驱动，可以模拟人类语言交互，但我没有自己的思想和情感。如果您有任何问题或需要帮助，请随时问我。']
      }
    }
  },
  created() {
    this.InitChatInfo()
  },
  methods: {
    fastSend(msg) {
      const info = {
        time: '',
        isMyText: true,
        messageText: msg
      }
      this.thisChatInfo.messageList.push(info)
    },
    fastChatEvent(msg, img) {
      const info = {
        time: '',
        isMyText: false,
        messageText: msg,
        messageImg: img
      }
      this.thisChatInfo.messageList.push(info)
    },
    fastRepeat(myMsg, otherMsg) {
      this.fastSend(myMsg)
      otherMsg.forEach(msg => {
        if (msg.isImg) {
          this.fastChatEvent('', msg.content)
        } else {
          this.fastChatEvent(msg.content)
        }
      })
    },
    InitChatInfo() {
      var permit = this.$store.state.who.who
      if (permit === 'manager') {
        this.fastChatList = this.manageFastChatList
      }
      console.log(permit)
      const id = this.userId
      this.chatInfo.forEach(info => {
        if (info.userId == id) {
          this.thisChatInfo = info
        }
      })
    },
    getSend() {
      const myMessage = {
        time: Date.now().toString(),
        isMyText: true,
        messageText: this.messages,
        messageImg: ''
      }
      var roMessage = {
        time: Date.now().toString(),
        isMyText: false,
        messageText: '404 NOT FOUND',
        messageImg: ''
      }
      this.thisChatInfo.messageList.push(myMessage)
      if (this.messages === '') {
        roMessage.messageText = '无法识别您的内容'
        this.thisChatInfo.messageList.push(roMessage)
        return
      } else if (this.messages === '本季利润') {
        if (this.$store.state.who.who === 'user') {
          roMessage.messageText = '抱歉，只有管理员有权限获取该部分内容信息'
          this.thisChatInfo.messageList.push(roMessage)
        } else {
          roMessage.messageText = '通过对比得出：本季营收稳定，但是管理运维费用过高,需要注意运维成本。'
          roMessage.messageImg = 'http://bittersweetyao.gitee.io/pic/pic/profit.jpg'
          this.thisChatInfo.messageList.push(roMessage)
        }
      } else {
        const indexes = this.talk.my.map((item, index) => {
          if (item === this.messages) {
            return index
          }
        }).filter(i => i !== undefined)
        console.log(indexes, this.messages)
        roMessage.messageText = this.talk.robot[indexes]
        console.log(roMessage, this.talk.robot[indexes])
        this.thisChatInfo.messageList.push(roMessage)
      }
      this.messages = ''
      // roMessage.messageText = '404 NOT FOUND'
    },
    getSends() {
      if (this.messages === '') {
        return
      }
      const message = {
        time: Date.now,
        isMyText: false,
        messageText: this.messages,
        messageImg: ''
      }
      this.thisChatInfo.messageList.push(message)
      this.messages = ''
    },
    back(e) {
      console.log(e.currentTarget.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.style = 'display:none')
    }
  }
}

</script>
<style scoped>
@media screen and (min-width:1000px) {
  .user-profile {
    position: absolute;
    top: 60px;
    right: -50px;
    width: 60%;
  }
}

@media screen and (max-width:1000px) {
  .user-profile {
    height: 80%;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
  }

  #chat {
    position: absolute;
    width: 100%;
  }
}

.clock {
  /*background-color: #005dba;*/
  border-radius: 10px;
  padding: 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.fastChat {
  margin: 10px;
  float: right;
  height: 20px;
  border: 1px solid rgb(241, 241, 241);
  background-color: transparent;
  color: gray;
  border-radius: 10px;
}

.chatBox-back {
  float: right;
  color: white;
  margin-top: -30px;
  margin-right: 5%;
}

#chat .chatBox {
  width: 100%;
  height: auto;
  margin: 2.5rem auto 0;
  margin-top: 0;
  background-color: #fff;
  overflow: hidden;
  border-radius: 0.625rem;
}

#chat .chatBox-top {
  width: 100%;
  height: 10%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  background-color: #2B3D63;
}

#chat .chatBox-top-imgBox {
  margin-left: 1.25rem;
}

#chat .chatBox-top-text {
  margin-left: 1.25rem;
  font-size: 1rem;
  color: #fff;
}

#chat .chatBox-middle {
  width: 100%;
  height: 55vh;
  background-color: #fff;
  overflow: scroll;
}

#chat .chatBox-infoDesk {
  width: 100%;
  height: 20%;
}

#chat .chatBox-textarea {
  width: 100%;
  height: 6.25rem;
}

#chat .chatBox-sendOut {
  position: fixed;
  bottom: 12vh;
  margin-top: 0.625rem;
  width: 100%;
  height: 20px;
  /* text-align: right; */
}

#chat .sendOut {
  position:fixed;
  right: 20px;
  background-color: #2B3D63;
  border: 1px solid #0f1523;
  border-radius: 5px;
  padding: 0 1.25rem;
  height: 3.5vh;

  margin: 0.3125rem 1.25rem 0 0;
}

#chat .chatInfo {
  width: 94%;
  height: 94%;
  margin: 1.25rem auto;
  overflow: auto;
}

#chat .chatUser-box {
  width: 100%;
  margin-bottom: 6px;
  display: flex;
  flex-direction: row;
}

#chat .chatUser-box-img {
  display: flex;
}

#chat .chatUser-info {
  margin: 0 1.25rem;
}

#chat .chatUser-info-name {
  font-size: 0.875rem;
  color: #888;
  display: flex;
  flex-direction: row;
}

#chat .nowDate {
  margin: 0 0.625rem;
}

#chat .chatUser-info-text {
  margin-top: 0.3125rem;
  max-width: 20rem;
  padding: 0.5rem;
  background-color: #E8E8E8;
  border-radius: 0.5rem;
  float: left;
  table-layout: fixed;
  word-break: break-all;
  overflow: hidden;
}

#chat .chatUser-info-text span {
  white-space: pre-line;
  font-size: 0.9375rem;
  line-height: 1.5625rem;
}

#chat .chatUser-box1 {
  flex-direction: row-reverse;
}

#chat .chatUser-info-name1 {
  flex-direction: row-reverse;
}

#chat .chatUser-info-text1 {
  float: right;
}</style>

